<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
      <STYLE type="text/css">
         .fontColor{
            color:#869713;
            font-size:12px;
         }
         
         .tableStyle{
            border-top:1px solid #817F80;
            border-left:1px solid #817F80;
            
            font-size:12px;
            width:473px;
         }
         
         .tableStyle tr td{
           border-right:1px solid #817F80;
           border-bottom:1px solid #817F80;
           
           text-align: left;
           padding-left: 4px;
           heihgt:25px;
           line-height: 25px;
         }
         
         .nextStyle{
            background-image: url('${pageContext.request.contextPath}/cts/images/btnNext.gif');
            width:57px;
            height:22px;
            border:0px solid red;
            text-align:center;
            vertical-align: top;
            font-size:12px;
            
            margin-top:5px;
            margin-right:20px;
            float:right;
         }
      </STYLE>
      
     <style type="text/css">
       .userlist2{
         width:200px;
         height:auto;
         border:1px solid gray;
         background-color:white;
         position: absolute;
         text-indent: none;
       }
       
       .userlist2 ul{
          list-style: none;
          width:200px;
          float:left;
          margin:0px;
          padding:0px;
       }
       
       .userlist2 ul li{
         clear: left;
         border-bottom:1px dotted gray;
         margin:0px;
         padding:0 0 0 2px;;
       }
       
       .background1{
         background-color:#ececec;
       }
       
       .background2{
         background-color:#ffffff;
       }
       
       .splitStr{
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
       }
     </style>
  </head>
  
  <body>
    <div>
       <div style="width:100%;height:42px;" align="center">
          <table style="width:473px;margin-left:10px;" align="center">
             <tr>
                <td style="text-align:left;">
			      <div style="color:#C95C79;font-size:18px;font-weight: bold;">结算团队</div>
                </td>
                <td style="text-align:right;">
		          <div>
			          <table cellpadding="0" cellspacing="0" onclick="addTeamEmployee();" align="right">
			            <tr>
			               <td><a href="#" class="fontColor">添加团队成员</a></td>
			               <td><img src="${pageContext.request.contextPath}/cts/images/fee_add.png"/></td>
			            </tr>
			          </table>
		          </div>
                </td>
             </tr>
          </table>
       </div>
       <div style="width:100%;height:166px;overflow:hidden;overflow-y:auto;border-bottom:1px solid gray;" >
	       <table cellpadding="0" cellspacing="0" border="0" class="tableStyle" id="teamlist" style="margin-left:10px;">
	          <tr>
	             <td style="background-color: #E8ECD3;width:92px;">团队成员名称</td>
	             <td style="background-color: #E8ECD3;width:90px;">权限</td>
	             <td style="background-color: #FAF1CD;width:222px;">权限说明</td>
	             <td style="background-color: #FAF1CD;width:68px;">&nbsp;</td>
	          </tr>
	          <tr id="trTeamBody_000" style="display:none;">
	             <td style="background-color: #E8ECD3;width:92px;" id="tdTeamName_0">
	               <div id="s_teamName_0" style="display:none;width:91px;" class="splitStr"></div>
	               <input uid="" type="text" style="width:95%;border:1px solid #ddd;" id="i_teamName_0" value="" onkeyup="searchUser(this , event)" onblur="myOnblur(this , 'userlist' , 0)" onclick="changeBorderColor(this, '#ddd')"/>
	             </td>
	             <td style="background-color: #E8ECD3;width:90px;"  id="tdLevel_0">
	               <span id="s_level_0" style="display:none;">创建</span>
	               <select id="i_level_0" style="width:95%;">
	                  <option value="0" id="0">创建</option>
	                  <option value="1" id="1">编辑</option>
	                  <option value="2" id="2">浏览</option>
	               </select>
	               <input type="hidden" value="0" id="levelid_0"/>
	             </td>
	             <td style="background-color: #FAF1CD;width:222px;" id="tdShowLevel_0">
	               <span id="showLevel_0_0" style="display:none;">结算单创建、编辑、删除、归档</span>
	               <span id="showLevel_1_0" style="display:none;">编辑结算单</span>
	               <span id="showLevel_2_0" style="display:none;">浏览结算单</span>
	             </td>
	             <td style="background-color: #FAF1CD;width:68px;"  id="tdTools_0">
	                  <table border="0" style="border:none;">
	                     <tr>
	                       <td style="border:0;">
                              <img  style="margin:0;padding:0;display:none;" src="${pageContext.request.contextPath}/cts/images/fee_edit.png" id="btnTeamEdit"/>
			                  <img  style="margin:0;padding:0" src="${pageContext.request.contextPath}/cts/images/fee_ok.png" id="btnTeamEnter"/>
	                       </td>
	                       <td style="border:0;">
			                  <img  style="margin:0;padding:0" src="${pageContext.request.contextPath}/cts/images/fee_del.png" id="btnTeamDelete"/>
                           </td>
	                     </tr>
	                  </table>
	             </td>
	          </tr>
	       </table>
       </div>
       <div style="width:100%;"> 
           <div class="nextStyle" onclick="toCreateOrder();"  id="btnNext1"></div>
       </div>
       <a href="#" id="addFinancal" style="display:none;" target="_blank"/>
    </div>
  </body>
</html>


<script type="text/javascript">
   $(function(){
       var lastFix = addTeamEmployee(1);
	   teamEnter(lastFix , 1);
	   
   });
   /**
     到创建财务订单的页面
   **/
   function toCreateOrder(){
     var list = btnNext();
     if(list == '' || list.length <=0){
       alert("请先添加团队成员");
     }else{
     	var type="<s:property value="#request.financialtype"/>";
        var url; 
        if(type==0){
        	url= "${pageContext.request.contextPath}/cts/receiveDetail?teamData="+list;
        }else if(type==1){
        	url= "${pageContext.request.contextPath}/cts/payDetail?teamData="+list;
        }else if(type==2){
        	url= "${pageContext.request.contextPath}/cts/awardDetail?teamData="+list;
        }
       
        $("#addFinancal").attr("href" , url);
        
        if(document.createEvent && !$.browser.mozilla){
			var card = document.getElementById('addFinancal');
			var ev = document.createEvent('HTMLEvents');
			ev.initEvent('click', false, true);
			card.dispatchEvent(ev);
		}else{
		 	document.getElementById('addFinancal').click();
		}
		
		closePopDiv("lostTeam2");
     }
   }
   
   //operate_a_1
   function addTeamEmployee(type){
      var temp = $("#trTeamBody_000");
      var timeM = new Date();
	  var time = timeM.valueOf();
	  
	  var objClone = $(temp).clone();
	  
	  if(type == 1){
	    objClone.find("td[id='tdTools_0']").find("table").hide();
	  }else{
	    objClone.find("td[id='tdLevel_0']").find("select > option:eq(0)").remove();
	    objClone.find("td[id='tdShowLevel_0']").find("span[id='showLevel_0_0']").remove();
	    objClone.find("td[id='tdShowLevel_0']").find("span[id='showLevel_1_0']").show();
	  }
	  
	  objClone.find("td[id='tdLevel_0']").find("select[id='i_level_0']").click(function(){
	      changeShowLevel(time);
	  });
	  
	  objClone.find("td[id='tdTools_0']").find("img[id='btnTeamEdit']").click(function(){
	     teamEdit(time);
	  });
	  
	  objClone.find("td[id='tdTools_0']").find("img[id='btnTeamEnter']").click(function(){
	     teamEnter(time);
	  });
	  
	  objClone.find("td[id='tdTools_0']").find("img[id='btnTeamDelete']").click(function(){
	     teamDelete(time);
	  });
	  
	  objClone.find("td[id='tdShowLevel_0']").find("span[id='showLevel_0_0']").show();
	  
	  objClone.find("td[id='tdTeamName_0']").attr("id" , "tdTeamName_"+ time);
	  objClone.find("td[id='tdLevel_0']").attr("id" , "tdLevel_"+ time);
	  objClone.find("td[id='tdShowLevel_0']").attr("id" , "tdShowLevel_"+ time);
	  objClone.find("td[id='tdTools_0']").attr("id" , "tdTools_"+ time);
	  objClone.attr("id" , 'trTeamBody_'+time);
	  
	  
	  objClone.show();
	  $(temp).before(objClone);
	  return time;
   }
   
   function teamEdit(lastFix){
     var tdTeamName = $("#tdTeamName_"+lastFix);
     var tdLevel = $("#tdLevel_"+lastFix);
     var tdShowLevel = $("#tdShowLevel_"+lastFix);
     var tdTools = $("#tdTools_"+lastFix);
     
     var teamName_Span = $(tdTeamName).find("div[id*='s_teamName']");
     var teamName_Input = $(tdTeamName).find("input[id*='i_teamName']");
     
     $(teamName_Input).val($(teamName_Span).text());
     teamName_Span.hide();
     teamName_Input.show();
     
     var tdLevel_Span = $(tdLevel).find("span[id*='s_level']");
     var tdLevel_Select = $(tdLevel).find("select[id*='i_level']");
     var levelid = $(tdLevel).find("input[id*='levelid_0']").val();
     $(tdLevel_Select).val($(tdLevel_Span).text());
     $(tdLevel_Select).find("option[id="+levelid+"]").attr("selected" , true);
     tdLevel_Span.hide();
     tdLevel_Select.show();
     
     $(tdTools).find("img[id='btnTeamEdit']").hide();
     $(tdTools).find("img[id='btnTeamEnter']").show();
     $("#btnNext1").show();
   }
   
   function teamEnter(lastFix , type){
     var tdTeamName = $("#tdTeamName_"+lastFix);
     var tdLevel = $("#tdLevel_"+lastFix);
     var tdShowLevel = $("#tdShowLevel_"+lastFix);
     var tdTools = $("#tdTools_"+lastFix);
     
     var teamName_Span = $(tdTeamName).find("div[id*='s_teamName']");
     var teamName_Input = $(tdTeamName).find("input[id*='i_teamName']");
     var tdLevel_Span = $(tdLevel).find("span[id*='s_level']");
     var tdLevel_Select = $(tdLevel).find("select[id*='i_level']");
     
     if(($(teamName_Input).val() == '' || $(teamName_Input).attr("uid") == '') && (type!=1)){
       alert("团队成员名称不能为空");
       $(teamName_Input).css({
         "border":"1px solid red"
       });
       
       return;
     }
     
     if(type == 1){
        var teamManId = '<s:property value="#request.employee2.id"/>';
        var teamNameTxt = '<s:property value="#request.employee2.nickname" escape="false"/>';
        $(teamName_Span).attr("title" , teamNameTxt);
        $(teamName_Span).text(teamNameTxt);
        $(teamName_Input).val(teamNameTxt);
        $(teamName_Input).attr("uid" , teamManId);
        $(tdLevel_Select).find("option").eq(0).attr("selected" , "selected");
     }else{
        $(teamName_Span).attr("title" , $(teamName_Input).val());
        $(teamName_Span).text($(teamName_Input).val());
     }
     
     teamName_Span.show();
     teamName_Input.hide();
     
     var selectId = $(tdLevel_Select).find("option:selected").val();
     $(tdLevel).find("input[id*='levelid_0']").val(selectId);
     $(tdLevel_Span).text($(tdLevel_Select).find("option:selected").text());
     
     
     tdLevel_Span.show();
     tdLevel_Select.hide();
     
     $(tdTools).find("img[id='btnTeamEdit']").show();
     $(tdTools).find("img[id='btnTeamEnter']").hide();
     $("#btnNext1").show();
   }
   
   function teamDelete(lastFix){
      $("#trTeamBody_"+lastFix).remove();
   }
   
   function changeShowLevel(lastFix){
      var tdLevel = $("#tdLevel_"+lastFix).find("select[id*='i_level']");
      var selectVal = $(tdLevel).val();
      var tdShowLevel = $("#tdShowLevel_"+lastFix);
      
      $(tdShowLevel).find("span[id='showLevel_0_0']").hide();
      $(tdShowLevel).find("span[id='showLevel_1_0']").hide();
      $(tdShowLevel).find("span[id='showLevel_2_0']").hide();
      
      $(tdShowLevel).find("span[id='showLevel_"+ selectVal +"_0']").show();
   }
   
   function btnNext(){
     var ary = [];
     $("#teamlist").find("tr[id*='trTeamBody']").each(function(){
         if(this.id == 'trTeamBody_000') return;
         
         var teamName = $(this).find("td[id*='tdTeamName']");
         var tdLevel = $(this).find("td[id*='tdLevel']");
         var auth = $(tdLevel).find("select[id*='i_level']").val();
         var emplyid = $(teamName).find("input[id*='i_teamName']").attr("uid");
         var teamNameVal = $(teamName).find("input[id*='i_teamName']").val();
         
         if(teamNameVal == '' || emplyid == '' || emplyid == 0){
           return;
         }
         
         var txt = emplyid+ "," + auth;
         ary.push(txt);
     });
     
     return ary.join(";");
     
   }
   
   function btnNext2(){
     var ary = [];
     $("#teamlist").find("tr[id*='trTeamBody']").each(function(){
         if(this.id == 'trTeamBody_000') return;
         
         var teamName = $(this).find("td[id*='tdTeamName']");
         var auth = $(teamName).find("input[id*='i_teamName']").attr("uid");
         var teamNameVal = $(teamName).find("input[id*='i_teamName']").val();
         
         if(teamNameVal == '' || auth== '' || auth == '0'){
           return;
         }
         
         ary.push(auth);
     });
     
     
     return ary.join(",");
   }
   
   function changeBorderColor(obj , color){
      if(color == null || color == ''){
        color = "#ddd";
      }
      
      $(obj).css({
         "border-color":color
      });
   }
</script>

<script type="text/javascript">
       
       function searchUser(obj , e){
            if(bindNextPrev(obj , e)){
               return;
            }
            
            var name = $(obj).val();
            if(name  == ""){
               $("#userlist").hide();
               return;
            }
            
            var listId = btnNext2();
            $.post("cts/findLostManlist.action?name="+name + "&listId="+listId , "" , function(data){
                  var data2 = eval("("+data+")");
                  showUserList(data2 , obj);
            });
            
         }
         
         function showUserList(data , obj){
            if(data.length <= 0){
               $("#userlist").hide();
               return;
            }
            var mObj = $("#teamlist").find("div[id='userlist']");
            if(mObj == null || $(mObj).html() == null ){
              var divObj = '<div id="userlist" class="userlist2"></div>';
              $(obj).before(divObj);
            }
            
            var li="";
            for(var i=0;i<data.length;i++){
               li += '<li id='+data[i]["userId"]+'>'+data[i]["userName"]+'</li>';
            }
            
            var ulHtml = "<ul sytle='border:1px solid red;'>" + li + "</ul>";
            $("#userlist").html(ulHtml);
            $("#userlist").find("li").each(function(){
                $(this).click(function(){
                    selectUser(this , obj);
                    $("#userlist").remove();
                }).mouseover(function(){
                    $(this).css({"background-color":"#ececec"});
                }).mouseout(function(){
                    $(this).css({"background-color":"#ffffff"});
                });
            });
            
            var top = $(obj).offset().top+10;
            var left = $(obj).offset().left;
            
            top = 25;
            left = 0;
            $("#userlist").css({
               "margin-top":top+"px",
               "margin-left":left+"px"
            }).show();
         }
         
         function selectUser(obj , obj2){
            var id = $(obj).attr("id");
            var name = $(obj).text();
            $(obj2).attr("uid" , id);
            $(obj2).val(name);
         }
         
         function myOnblur(obj , hideId , hideType){
           var time = null;
           time = window.setTimeout(function(){
               window.clearTimeout(time);
               if(hideType == 0){
                 $("#"+hideId).remove();
               }else{
                 $("#"+hideId).hide();
               }
           } , 500);
        }
</script>

<script type="text/javascript">
	var selectObject = null;
	function mouseMoveCha(){
	    var contentlist = $("#userlist");
	    contentlist.each(function(i){
	        $(this).mouseout(function(){
	            //selectObject = this;
	    		$(contentlist).find("li").css({"background-color":"#fff"});
	            $(this).css({"background-color":"#ddd"});
	        }).mouseover(function(){
	        
	        });
	    });
		      
	}

    function bindNextPrev(obj , e){
       mouseMoveCha();
          
       var theEvent = window.event || e;
       if(typeof(theEvent) == 'undefined'){
         return true;
       }
       
	    var keyFee = theEvent.keyCode || theEvent.which;
	    var isGo = false;
		var contentlist = $("#userlist");
	    
	    if (keyFee == 38) {// prev
	        if(selectObject == null){
	           selectObject = $(contentlist).find("li:last");
	        }else{
	           selectObject = $(selectObject).prev();
	           if($(selectObject).html() == null){
	              selectObject = $(contentlist).find("li:last");
	           }
	        }
		    isGo = true;
		}
		
		if (keyFee == 40) {// next
		    if(selectObject == null){
	           selectObject = $(contentlist).find("li:first");
	        }else{
	           selectObject = $(selectObject).next();
	           if($(selectObject).html() == null){
	              selectObject = $(contentlist).find("li:first");
	           }
	        }
		    isGo = true;
		}
		
		if(keyFee == 13){ // enter
		    if(selectObject!=null && $(selectObject).html() !=null){
		        var txt = $(selectObject).text();
		        var id = $(selectObject).attr("id");
		        $(obj).val(txt);
		        $(obj).attr("uid" , id);
		    }
		    
		    $(contentlist).hide();
		    return true;
		}
		
		if(keyFee == 27){
		   $(contentlist).hide();
		    return true;
		}
		
		// change the background color
		if(isGo == true){
		   if($(selectObject).html() !=null){
		      $(contentlist).find("li").css({"background-color":"#fff"});
		      $(selectObject).css({"background-color":"#ddd"});
		   }
		   
		   return true;
		}
      }
      
   </script>